<template>
	<div>
		<UPLOAD v-if="upload">
		
		</UPLOAD>
	<div v-if="show">
		<el-container>
			<el-main>
				<el-row>
					<el-col :span="13" :offset="3">
						<el-row>
							<el-col :span="3">
								<el-avatar :size="60" :src="src">
								</el-avatar>
							</el-col>
							<el-col :span="21" style="background-color: #F1F6F8;font-size: 18px;margin-top: 6px;">
								<el-row style="border-bottom:1px solid;">{{this.student.name}}</el-row>
								<el-row>学号:{{this.student.studentNumber}}</el-row>
							</el-col>
						</el-row>
					</el-col>
					<el-col :span="13" :offset="3"
						style="font-size: 20px;background-color: #F1F6F8;margin-top: 10px;padding: 20px;">
						<el-row :gutter="0">
							<el-col :span="5" style="text-align:center;padding: 6px;">账户余额</el-col>
							<el-col :span="5">
								<el-button type="text" @click="showMoney">显示余额</el-button>
							</el-col>
						</el-row>
						<el-row style="margin-top:20px;">
							<el-col :span="5" :offset="4" style="text-align:center;padding: 6px;">{{this.money}}元</el-col>
							<el-col :span="5" :offset="3">
								<el-button type="primary" @click="dialogVisible = true">充值</el-button>
							</el-col>
						</el-row>
					</el-col>
				</el-row>
				<el-dialog title="请充值" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
					<el-input placeholder="请输入金额" v-model="mes.balance"></el-input>
					<div>
						<br />
					</div>
					<el-select v-model="value" clearable placeholder="请选择" style="width: 100%;">
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
					<span slot="footer" class="dialog-footer">
						<el-button @click="dialogVisible = false">取 消</el-button>
						<el-button type="primary" @click="balabce">确 定</el-button>
					</span>
				</el-dialog>
			</el-main>
		</el-container>
	</div>
	</div>
</template>

<script>
	import UPLOAD from "./upload.vue";
	import userDataMixin from '../../mixin/userDataMixin'
	export default {
		mixins: [userDataMixin],
		components: {
			UPLOAD
		},
		data() {
			return {
				money: "**.**",
				dialogVisible: false,
				upload: true,
				show: false,
				src: "http://120.79.136.233:9898/queryStudentUserHeadPortraitById/" + localStorage.getItem("userId"),
				mes: {
					balance: "",
				},
				options: [{
					value: '微信支付',
				}],
				value: ''
			}
		},
		watch: {
			student: {
				deep: true,
				handler(nV, oV) {
					this.upload = false;
					this.show = true;
				},
			}
		},
		methods: {
			handleClose(done) {
				this.$confirm('确认关闭？')
					.then(_ => {
						done();
					})
					.catch(_ => {});
			},
			showMoney() {
				this.$axios({
					method: "get",
					url: "/findStudentUserBalanceById/" + localStorage.getItem("userId"),
					headers: {
						"Content-Type": "application/json"
					},
				}).then((res) => {
					this.money = res.data.data
				}).catch((e) => {
					console.log(e);
				});
			},
			balabce() {
				this.dialogVisible = false,

					// yj
					this.$axios({
						method: "post",
						url: "/Rec/upDownRec",
						data: JSON.stringify({
							"payMethod": this.value,
							"money": this.mes.balance
						}),
						headers: {
							"Content-Type": "application/json"
						},
					}).then((res) => {
						console.log(JSON.stringify({
							"payMethod": this.value,
							"money": this.mes.balance
						}))
						console.log()
						if(res.data.code==200){
							// wjx
							this.$axios({
								method: "post",
							 url: "/updateStudentBalance",
								data: JSON.stringify(this.mes),
								headers: {
									"Content-Type": "application/json"
								},
							}).then((res) => {
								if(res.data.code==200){
								alert("充值成功");
								this.money = parseFloat(this.money) + parseFloat(this.mes.balance)
								}else{
									alert("充值不成功")
								}
							}).catch((e) => {
								console.log(e);
							});
						}
						

					}).catch((e) => {
						console.log(e);
					});
			}
		}
	}
</script>

<style>
	
</style>
